<template>
    <div id="app-container">
        <el-row :gutter="20" class="head" type='flex' align="middle">
            <el-col :span="16" :offset="1" class="activity-title">{{activityName==''?'暂无活动':activityName}}</el-col>
            <el-col :span="4">
                <el-steps :active="active" finish-status="success" process-status='finish' v-if="alter==false">
                    <el-step title="选择人群"></el-step>
                    <el-step title="填写信息"></el-step>
                </el-steps>
                <el-row :gutter="20" type='flex' align="middle" justify="space-around" v-if="alter==true">
                    <el-col :span="4"  class="activity-title"><el-button @click="active=0" v-show="active==1">上一步</el-button></el-col>
                    <!-- <el-col :span="2"><el-button @click="compile" v-if="!own">编辑</el-button></el-col> -->
                    <el-col :span="2"><el-button @click="pushOut('old')" v-if="own&&active==1">发布</el-button></el-col>
                    <el-col :span="6" v-show="active==0"><el-button @click="back">取消</el-button></el-col>
                    <el-col :span="6" :offset="4" v-show="active==0"><el-button @click="choosedGroup">下一步</el-button></el-col>
                </el-row>
            </el-col>
        </el-row>

        <!-- 选择人群 -->
        <div class="reach-to" v-if="active==0">触达对象</div>
        <div class="choose-group" v-if="active==0">
            <el-row type="flex" align="middle">
                <el-col :span="1.5" :offset="1" class="choose-tips">
                    选择分群
                </el-col>
                <el-col :span="8">
                    <el-select v-model="groupValue" filterable placeholder="请选择" :disabled="!
                    own">
                        <el-option
                        v-for="item in groups"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
        </div>

         <el-row :gutter="20" type='flex' align="middle" v-if="active==0&&!alter">
            <el-col :span="2" :offset="19" class="activity-title"><el-button @click="back">取消</el-button></el-col>
            <el-col :span="2"><el-button @click="choosedGroup">下一步</el-button></el-col>
        </el-row>

        <!-- 设置触发规则 -->

        <div class="trigger-rule" v-if="active==1">
            <el-row>
                <el-col :span="6">触发条件</el-col>
            </el-row>
            <div class="trigger-condition"  @click="SSS">
                <el-row class="trigger-style">
                    <el-col :span="2">触发类型</el-col>
                    <el-col :span="18" :offset="1">
                           <div class="trigger-times">
                                <el-radio v-model="timesValue" label="1" border :disabled="!own&&timesValue==2">定时·单一触发</el-radio>
                                <el-radio v-model="timesValue" label="2" border :disabled="!own&&timesValue==1">定时·重复触发</el-radio>
                            </div>
                    </el-col>
                </el-row>

                <el-row class="trigger-time trigger-style">
                    <el-col :span="2">触发时间</el-col>
                    <el-col :span="18" :offset="1">
                        <!-- 单一触发的触发时间 -->
                        <div class="trigger-times"  v-if="timesValue==1">
                            <el-date-picker
                                v-model="timeValue"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                :picker-options="pickerOption"
                                @change="dateChange"
                                placeholder="选择日期时间"
                                :disabled="!own">
                            </el-date-picker>
                        </div>

                        <div class="trigger-times"  v-if="timesValue==2">
                            <el-row class="trigger-times-date">
                                <el-date-picker
                                    v-model="repeatTime"
                                    type="daterange"
                                    range-separator="至"
                                    :picker-options="pickerOption"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    :disabled="!own">
                                </el-date-picker>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-select v-model="repeatWeek" placeholder="请选择" :disabled="!own" @change='repeatWeekChange'>
                                        <el-option
                                        v-for="item in repeatWeekOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" :offset="1" v-if="repeatWeek!='0'">
                                    <el-select v-model="repeatDate" placeholder="请选择" :disabled="!own">
                                        <el-option
                                        v-for="item in repeatDateOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" :offset="1">
                                    <el-time-select
                                        v-model="repeatMinute"
                                        :picker-options="{
                                            start: '00:00',
                                            step: '00:30',
                                            end: '23:59'
                                        }"
                                        placeholder="选择时间"
                                        :disabled="!own">
                                    </el-time-select>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>

                <el-row class="trigger-time" v-if="timesValue==2">
                    <el-col :span="2">触达上限

                    </el-col>
                    <el-col :span="18" :offset="1">
                        <!-- 单一触发的触发时间 -->
                        <el-row class="trigger-times-date">
                            <el-radio v-model="triggerLimit" label="1" border :disabled="!own&&triggerLimit==2">参与1次</el-radio>
                            <el-radio v-model="triggerLimit" label="2" border :disabled="!own&&triggerLimit==1">参与多次</el-radio>
                        </el-row>
                        <el-row v-if="triggerLimit==1">该活动中，每个用户只触达一次</el-row>
                        <el-row v-if="triggerLimit==2" class="limit">
                            该活动中，同一用户 <input type="number" v-model="limitDay" :disabled="!own" @change="handleChange"> 天内，最多参与 <input type="number" v-model="limitTimes" :disabled="!own" @change="handleChange"> 次
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </div>


        <div class="trigger-rule" v-if="active==1">
            <el-row>
                <el-col :span="6">触发内容配置</el-col>
            </el-row>
            <div class="trigger-condition">
                <el-row>
                    <el-col :span="12">
                        <el-row class="trigger-style">
                            <el-col :span="4">触达通道</el-col>
                            <el-col :span="18" :offset="1">
                                <el-select v-model="triggerTo" placeholder="请选择" :disabled="!own">
                                    <el-option
                                    v-for="item in triggerToOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="messageValue" placeholder="请选择" :disabled="!own" v-show="triggerTo=='4'">
                                    <el-option
                                    v-for="item in messageOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="kefuValue" placeholder="请选择" :disabled="!own" v-show="triggerTo=='4'">
                                    <el-option
                                    v-for="item in kefuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="formValue" placeholder="请选择" :disabled="!own" v-show="triggerTo=='4'">
                                    <el-option
                                    v-for="item in formOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        <el-row class="trigger-style" v-show="triggerTo=='1'">
                            <el-col :span="4">内容配置</el-col>
                            <el-col :span="18" :offset="1">
                                <el-row class="trigger-times-date">
                                    <el-dropdown  trigger="click" @command="handleCommand">
                                        <span class="el-dropdown-link blue">
                                            <i class="el-icon-circle-plus-outline"></i> 插入变量
                                        </span>
                                        <el-dropdown-menu slot="dropdown"
                                        >
                                            <el-dropdown-item command="user" :disabled="!own">用户变量</el-dropdown-item>
                                            <el-dropdown-item command="link" :disabled="!own">链接变量</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </el-row>
                                <el-row class="textArea">
                                    <el-col :span="20">
                                        <el-input type="textarea" rows="4" v-model="setContent" :disabled="!own"></el-input>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>

                        <el-row class="trigger-style" v-if="userData&&triggerTo=='1'">
                            <el-row>用户变量1</el-row>
                            <el-row type="flex" align="middle" class="choose-bg choose-user">
                               <el-col :span="4">选择变量</el-col>
                               <el-col :span="6">
                                    <el-select v-model="userValue" placeholder="请选择" :disabled='!own'>
                                        <el-option
                                        v-for="item in userOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                               </el-col>
                            </el-row>
                        </el-row>

                        <el-row class="trigger-style" v-if="linkData&&triggerTo=='1'">
                            <el-row>link变量1</el-row>
                            <el-row class="choose-bg">
                                <el-row class="choose-user" type="flex" align="middle">
                                    <el-col :span="4">链接类型</el-col>
                                    <el-col :span="16">
                                        <el-radio-group v-model="linkType">
                                            <el-radio label="1" border :disabled="!own&&linkType==2">现有链接</el-radio>
                                            <el-radio label="2" border :disabled="!own&&linkType==1">自定义内容</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                </el-row>
                                <el-row class="choose-user" type="flex" align="middle" v-if="linkType==1">
                                    <el-col :span="4">链接地址</el-col>
                                    <el-col :span="16">
                                        <el-input v-model="haveLink" :disabled="!own"></el-input>
                                    </el-col>
                                </el-row>

                                <el-row class="choose-user" type="flex" align="middle" v-if="linkType==2">
                                    <el-col :span="4">链接名称</el-col>
                                    <el-col :span="16">
                                        <el-input v-model="linkText" :disabled="!own"></el-input>
                                    </el-col>
                                </el-row>

                                <el-row class="choose-user" type="flex" align="top" v-if="linkType==2">
                                    <el-col :span="4">内容变量</el-col>
                                    <el-col :span="16">
                                        <el-row class="trigger-times-date" type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-select v-model="linkChooseValue" placeholder="请选择" :disabled="!own">
                                                    <el-option
                                                    v-for="item in userGroups"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <!-- <div class="filtrate" @click="dialogVisible = true">
                                                筛选
                                            </div> -->
                                        </el-row>
                                        <!-- <el-row class="trigger-times-date">并且行为满足以下筛选条件</el-row>
                                        <el-row class="trigger-times-date"><el-tag closable>区经-喵喵喵</el-tag></el-row> -->
                                    </el-col>
                                </el-row>

                                <el-row class="choose-user" type="flex" align="middle" v-if="linkType==2">
                                    <el-col :span="5">是否统一分发：</el-col>
                                    <el-col :span="16">
                                        <el-radio-group v-model="isUnifyDispense" :disabled="!own">
                                            <el-radio label="1" border>是</el-radio>
                                            <el-radio label="2" border>否</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                </el-row>

                                <el-row class="choose-user" type="flex" align="middle" v-if="linkType==2&&isUnifyDispense==2">
                                    <el-col :span="5">分发机制：</el-col>
                                    <el-col :span="18">
                                        <!-- <el-radio-group v-model="linkType">
                                            <el-radio label="1" border>是</el-radio>
                                            <el-radio label="2" border>否</el-radio>
                                        </el-radio-group> -->
                                        基于触达对象与内容变量用户分群所属区经或所属销管关系分发
                                    </el-col>
                                </el-row>
                        
                            </el-row>
                        </el-row>

                    </el-col>

                    <el-col :span="11" :offset="1" v-if="setContent!=''&&triggerTo=='1'">
                        <el-row class="trigger-times-date">效果预览</el-row>
                        <el-row class="preview" type="flex" align="middle">
                            <div class="note">{{showContent}}</div>
                            <!-- <div class="note">{{userValueLabel}}</div> -->
                        </el-row>
                    </el-col>
                </el-row>
            </div>

            <el-row :gutter="20" type='flex' align="middle" v-if="active==1&&!alter" style="margin-top: 50px">
                <el-col :span="2" :offset="19" class="activity-title"><el-button @click="active=0">上一步</el-button></el-col>
                <el-col :span="2"><el-button @click="pushOut('new')" v-if="own">发布</el-button></el-col>
            </el-row>
        </div>


        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            class="dialog-top">
            <el-row>
                <el-col :span="8">
                    <el-select v-model="variate1" placeholder="请选择">
                        <el-option
                        v-for="item in LinkChooseOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" :offset="1">
                    <el-select v-model="variate1" placeholder="请选择">
                        <el-option
                        v-for="item in LinkChooseOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8" :offset="1">
                    <el-select v-model="variate1" placeholder="请选择">
                        <el-option
                        v-for="item in LinkChooseOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button size="mini">继续添加</el-button>
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="mini">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
const monthOptions = [{
                    value: '1',
                    label: '1号'
                },{
                    value: '2',
                    label: '2号'
                },{
                    value: '3',
                    label: '3号'
                },{
                    value: '4',
                    label: '4号'
                },{
                    value: '5',
                    label: '5号'
                },{
                    value: '6',
                    label: '6号'
                },{
                    value: '7',
                    label: '7号'
                },{
                    value: '8',
                    label: '8号'
                },{
                    value: '9',
                    label: '9号'
                },{
                    value: '10',
                    label: '10号'
                },{
                    value: '11',
                    label: '11号'
                },{
                    value: '12',
                    label: '12号'
                },{
                    value: '13',
                    label: '13号'
                },{
                    value: '14',
                    label: '14号'
                },{
                    value: '15',
                    label: '15号'
                },{
                    value: '16',
                    label: '16号'
                },{
                    value: '17',
                    label: '17号'
                },{
                    value: '18',
                    label: '18号'
                },{
                    value: '19',
                    label: '19号'
                },{
                    value: '20',
                    label: '20号'
                },{
                    value: '21',
                    label: '21号'
                },{
                    value: '22',
                    label: '22号'
                },{
                    value: '23',
                    label: '23号'
                },{
                    value: '24',
                    label: '24号'
                },{
                    value: '25',
                    label: '25号'
                },{
                    value: '26',
                    label: '26号'
                },{
                    value: '27',
                    label: '27号'
                },{
                    value: '28',
                    label: '28号'
                },{
                    value: '29',
                    label: '29号'
                },{
                    value: '30',
                    label: '30号'
                },{
                    value: '31',
                    label: '31号'
                }];
const weekOptions = [{
                    value: '51',
                    label: '星期一',
                },{
                    value: '52',
                    label: '星期二',
                },{
                    value: '53',
                    label: '星期三',
                },{
                    value: '54',
                    label: '星期四',
                },{
                    value: '55',
                    label: '星期五',
                },{
                    value: '56',
                    label: '星期六',
                },{
                    value: 'sund50ay',
                    label: '星期天',
                }];
import { singleActivityDisplay, createActivity, updateActivityStatus, getGroupList, selectColoumnByGroupId, updateActivity, getWxServiceCustomers, getTemplates } from "@/api/smartRun/setActivity";
export default {
    data(){
        return {
            activityName: '',
            own: false,
            active: null,
            groupValue: '',
            groups: [], // 所有的群
            userGroups: [], //用户的群
            repeatWeekOptions: [{
                value: '2',
                label: '每月'
            },{
                value: '1',
                label: '每周'
            },{
                value: '0',
                label: '每天'
            }],
            repeatDateOptions: [],
            timesValue: '1', // 触发类型
            timeValue: '',  //单一触发 触发时间
            pickerOption: {
                disabledDate:(time) => {
                    // console.log(666,time.getTime())
                    return (Date.now() - 3600*1000*24 > time.getTime());
                },
            },
            repeatTime: [], //重复触发 触发日期
            repeatWeek: '2', //触发时间 周月
            repeatDate: '1', //触发时间 具体几号
            repeatMinute: '',
            triggerLimit: '1', //触达上限
            limitDay: 5, //触达上限 天
            limitTimes: 1, //触达上限 次
            triggerToOptions: [{
                value: '1',
                label: '企业微信消息'
            },{
                value: '4',
                label: '公众号消息'
            }],
            messageOptions: [{
                value: 'kf',
                label: '客服消息'
            }],
            kefuOptions: [],
            formOptions: [],
            triggerTo: '1', //触达通道
            messageValue: 'kf',
            kefuValue: '', 
            formValue: '', 
            setContent: '', //文本内容
            // showContent: '', //预览效果内容
            dynamicTags: ['标签一', '标签二', '标签三'],
            userOptions: [{
                value: '会员到期日',
                label: '会员到期日'
            }],
            userValue: '',
            // userValueLabel: '',
            linkType: '1',
            haveLink: '', //现有链接
            linkText: '', //自定义链接名称
            LinkChooseOptions: [{
                value: 'salesman',
                label: '本月待续费用户',
            }], //link变量选择变量
            linkChooseValue: '', // link选择变量的值
            dialogVisible: false, //是否显示筛选
            variate1: '',
            isUnifyDispense: '1', //是否统一分发
            userData: false, //是否插入用户变量1
            linkData: false, //是否插入link变量1
            alter: false, //是否需要编辑
            tip: true, //提示是否要发布
            checkGroupsQuaryParams: {
                own: false,
                page: 1,
                pageSize: 100
            }, //查询所有群的参数
            pushQuaryParams: {

            }, //发布活动上传的参数
        }
    },
    methods: {
        handleChange(e) {
            if (this.limitDay < 1) {
                this.limitDay = 1
            }
            if (this.limitTimes < 1) {
                this.limitTimes = 1
            }
        },
        dateChange: function() {
            console.log(1)
            if(new Date(this.timeValue).getTime()<new Date().getTime()){
                this.timeValue = '';
                this.$message.error('请选择有效的时间！');
                return
            }
                        console.log(2)
            var startAt = new Date(this.date) * 1000 /1000;
            if(startAt < Date.now()) {
                this.timeValue= new Date();
            }
                        console.log(3)
            let timeStr = this.timeValue;
                        console.log(4)
            let str = timeStr.substring(timeStr.length - 2);
            if(str!='00'&&str!='30') {
                this.timeValue = '';
                this.$message.error('只能选择半点');
            }
        },
        handleCommand(command) {
            if(command == 'user' && this.setContent.indexOf('【用户变量1】')==-1){
                this.setContent = '【用户变量1】' + ' ' + this.setContent;
                this.userData = true;
            }
            if(command == 'link' && this.setContent.indexOf('【link变量1】')==-1){
                this.setContent = this.setContent +  ' ' + '【link变量1】';
                this.linkData = true;
            }
        },
        back(){
            this.$router.go(-1);
        },
        SSS(){
            console.log(this);
        },
        repeatWeekChange(){
            if(this.repeatWeek=='2'){
                this.repeatDateOptions = monthOptions;
                this.repeatDate= '1';
            } else if(this.repeatWeek=='1') {
                this.repeatDateOptions = weekOptions;
                this.repeatDate= '51';
            } else {
                this.repeatDate= '';
            }
        },
        choosedGroup(){
            if(this.groupValue.length==0){
                this.$message.error('请选择触达对象！')
                return
            }
            selectColoumnByGroupId({
                id: this.groupValue
            }).then(res => {
                let userOptions = res.data;
                userOptions.map((v, index) => {
                    userOptions[index] = {};
                    userOptions[index].value = v.refDetailCode;
                    userOptions[index].label = v.refDetailName;
                })
                this.userOptions = userOptions;
                this.active = 1;
            })
        },
        pushOut(type){
            this.pushQuaryParams.name = this.activityName;
            this.pushQuaryParams.receiverGroupId = this.groupValue;
            if(this.timesValue==1){
                if(this.timeValue==''){
                    return this.$alert('当前活动信息不完整，请补充后重新发布', '活动发布失败', {
                        confirmButtonText: '知道了',
                        callback: action => {
                        }
                    });
                }
                this.pushQuaryParams.triggerType = 0
                this.pushQuaryParams.preciseTime = this.timeValue;
                delete this.pushQuaryParams.startDate;
                delete this.pushQuaryParams.endDate;
                delete this.pushQuaryParams.frequencyType;
                delete this.pushQuaryParams.frequencySecondType;
                delete this.pushQuaryParams.frequencyPreciseTime;
                delete this.pushQuaryParams.attendCount;
                delete this.pushQuaryParams.daysCount;
                delete this.pushQuaryParams.triggerCount;
            }
            if(this.timesValue==2){
                if(this.repeatTime[0] == ''||this.repeatMinute==''||this.limitDay==''||this.limitTimes==''||!this.repeatMinute||!this.limitDay||!this.limitTimes||!this.repeatWeek){
                    return this.$alert('当前活动信息不完整，请补充后重新发布', '活动发布失败', {
                        confirmButtonText: '知道了',
                        callback: action => {
                        }
                    });
                }
                this.pushQuaryParams.triggerType = 1;
                delete this.pushQuaryParams.preciseTime;
                this.pushQuaryParams.startDate = this.repeatTime[0];
                this.pushQuaryParams.endDate = this.repeatTime[1];
                this.pushQuaryParams.frequencyType = this.repeatWeek;
                this.pushQuaryParams.frequencySecondType = this.repeatDate;
                this.pushQuaryParams.frequencyPreciseTime = this.repeatMinute;
                this.pushQuaryParams.attendCount = (this.triggerLimit=='1'?0:1);
                if(this.triggerLimit=='1'){
                    delete this.pushQuaryParams.daysCount;
                    delete this.pushQuaryParams.triggerCount;
                }
                if(this.triggerLimit=='2'){
                    this.pushQuaryParams.daysCount = this.limitDay;
                    this.pushQuaryParams.triggerCount = this.limitTimes;
                }
            }
            this.pushQuaryParams.sendChannel = this.triggerTo;
            this.pushQuaryParams.sendType = 0;
            if(this.triggerTo=='1'){
                delete  this.pushQuaryParams.gzhMessageType
                delete  this.pushQuaryParams.gzhConsultantId
                delete  this.pushQuaryParams.gzhTemplateId
                this.pushQuaryParams.content = this.setContent;
                if(this.setContent==''||(this.userData&&this.userValue=='')||(this.linkData&&this.linkType==1&&this.haveLink=='')||(this.linkData&&this.linkType==2&&(this.linkText==''||this.linkChooseValue==''))){
                    return this.$alert('当前活动信息不完整，请补充后重新发布', '活动发布失败', {
                        confirmButtonText: '知道了',
                        callback: action => {
                        }
                    });
                }
                if(!this.userData&&!this.linkData){
                    delete this.pushQuaryParams.triggerUserVariable
                    delete this.pushQuaryParams.linkType
                    delete this.pushQuaryParams.linkAddress
                    delete this.pushQuaryParams.groupSendId
                    delete this.pushQuaryParams.unitedSend
                    delete this.pushQuaryParams.linkName
                }
                if(this.userData){
                    // console.log(this.userValue, 778)
                    // return
                    this.pushQuaryParams.triggerUserVariable = this.userValue;
                }
                if(this.linkData){
                    this.pushQuaryParams.linkType = (this.linkType==1?0:1)
                    if(this.linkType == 1){
                        this.pushQuaryParams.linkAddress = this.haveLink
                        delete this.pushQuaryParams.linkName //删除链接名称待添加
                        delete this.pushQuaryParams.unitedSend
                    } else {
                        delete this.pushQuaryParams.linkAddress
                        this.pushQuaryParams.linkName = this.linkText
                        this.pushQuaryParams.groupSendId = this.linkChooseValue
                        this.pushQuaryParams.unitedSend = (this.isUnifyDispense==1? 1:0)
                    }
                }
            } else if (this.triggerTo=='4') {
                if(this.kefuValue==''||this.formValue==''){
                    return this.$alert('当前活动信息不完整，请补充后重新发布', '活动发布失败', {
                        confirmButtonText: '知道了',
                        callback: action => {
                        }
                    });
                }
                delete this.pushQuaryParams.content
                delete this.pushQuaryParams.triggerUserVariable
                delete this.pushQuaryParams.linkType
                delete this.pushQuaryParams.linkAddress
                delete this.pushQuaryParams.groupSendId
                delete this.pushQuaryParams.unitedSend
                delete this.pushQuaryParams.linkName
                this.pushQuaryParams.gzhMessageType = 1
                this.pushQuaryParams.gzhConsultantId = this.kefuValue
                this.pushQuaryParams.gzhTemplateId = this.formValue
            }
            this.$confirm('请确认是否发布上线活动？', '确认发布', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确认发布',
                cancelButtonText: '取消'
            })
            .then(() => {
                if(type == 'new'){
                    createActivity(this.pushQuaryParams).then(res => {
                        this.$router.push({
                            name: 'Activity',
                        });
                    })

                }else {
                    this.pushQuaryParams.id = this.activityId;
                    updateActivity(this.pushQuaryParams).then(res => {
                        this.$router.push({
                            name: 'Activity',
                        });
                    })
                }
            })
            .catch(action => {

                
            });
        },
        compile(){
            if(this.alter == true){
                this.$confirm('活动正在线上运行，如要编辑修改需先中止活动，是否中止？', '提示', {
                    confirmButtonText: '中止',
                    cancelButtonText: '退出',
                }).then(() => {
                    // updateActivityStatus({
                    //     id: this.activityId,
                    //     status: 1
                    // }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '活动中止成功!'
                        });
                        this.own = true;
                    // })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
        cancel: function() {
            if(this.tip){
                this.$confirm('当前活动尚未发布，请确认是否直接离开？', '确认是否离开？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$router.go(-1);
                }).catch(() => {
                    return        
                });
            }else {
                this.$router.go(-1);
            }
        },
        getGroups(){
            getGroupList(this.checkGroupsQuaryParams).then(res => {
                let list = res.data.list;
                let groups = [];
                let userGroups = [];
                list.map((v, index) => {
                    groups[index] = {};
                    groups[index].label = v.groupName
                    groups[index].value = v.groupId
                    groups[index].fromTable = v.fromTable
                })
                groups.map(n => {
                    if(n.fromTable=='shulan_ao.ao_oper_user_info'){
                        userGroups.push(n)
                    }
                })
                console.log(userGroups, 123)
                this.groups = groups;
                this.userGroups = userGroups;
            })
        },
        async getWxServiceCustomers(){
            getWxServiceCustomers().then(res => {
                let list = res.data.list;
                let WxServiceList = [];
                list.map((v, index) => {
                    WxServiceList[index] = {};
                    WxServiceList[index].label = v.guide_nickname
                    WxServiceList[index].value = v.guide_account
                })
                console.log(111, WxServiceList)
                this.kefuOptions = WxServiceList;
                // this.kefuValue = this.kefuOptions[0].value || '';
                // this.kefuValue = 'wxid_w8atvehl2xhv22';
            })
        },
        getTemplates(){
            getTemplates({
                type: 'GZH',
                templateType: 1
            }).then(res => {
                let list = res.data;
                const newList = JSON.stringify(list).replace(/id/g, 'value').replace(/passagewayName/g, 'label');
                this.formOptions = JSON.parse(newList)
                // this.formValue = this.formOptions[0].value || '';
            })
        },
    },
    computed: {
        userValueLabel(){
            let label;
            this.userOptions.find(v => {
                if(v.value == this.userValue){
                    label = v.label
                }
            })
            return label
        },
        showContent(){
            if(this.linkType==1){
                return this.setContent.replace('【link变量1】', this.haveLink==''||!this.haveLink?'【link变量1】':'('+this.haveLink+')').replace('【用户变量1】', !this.userValueLabel?'【用户变量1】':'('+this.userValueLabel+')')
            } else {
                return this.setContent.replace('【link变量1】', this.linkText==''||!this.linkText?'【link变量1】':'('+this.linkText+')').replace('【用户变量1】', !this.userValueLabel?'【用户变量1】':'('+this.userValueLabel+')')
            }
        }
    },
    watch: {
        setContent: {
            handler(newVal, oldVal){
                this.userData = newVal.indexOf('【用户变量1】')!=-1
                this.linkData = newVal.indexOf('【link变量1】')!=-1
            }
        },
    },
    async created(){
        this.getGroups();
        await this.getWxServiceCustomers();
        this.getTemplates();
    },
    mounted(){
        this.repeatWeekChange()
        console.log(this.$route, 777)
        // 创建活动
        if(this.$route.query.activityName){
            this.active = 0;
            this.own = true;
            this.activityName = this.$route.query.activityName
        }
        // 查看活动
        if(this.$route.params.id){
            this.activityId = this.$route.params.id;
            this.alter = this.$route.params.alter;
            this.active = 0;
            this.own = this.$route.params.alter;
            singleActivityDisplay({id: this.activityId}).then(response => {
                // this.activityName = '我我我我';
                // this.groupValue = ["leave"];
                // this.timesValue = '2';
                // this.timeValue = '1613966400000';
                // this.repeatTime = ['1614096000000', '1616515200000'];
                // this.repeatWeek = '2';
                // this.repeatWeekChange();
                // this.repeatDate = '6';
                // this.repeatMinute = '01:00';
                // this.triggerLimit = '2';
                // this.limitDay = '3';
                // this.limitTimes = '2';
                // this.setContent='截至【用户变量1】,[link变量1]，请及时跟进';
                // this.userValue = '会员到期日';
                // this.linkChooseValue = 'salesman';
                this.groupValue = response.data.receiverGroupId;
                this.activityName = response.data.name;
                this.timesValue = (response.data.triggerType==0?'1':'2');
                this.timeValue = response.data.preciseTime;
                this.triggerTo = response.data.sendChannel.toString();
                this.repeatTime[0] = response.data.startDate?response.data.startDate:'';
                this.repeatTime[1] = response.data.endDate?response.data.endDate:'';
                this.repeatWeek = response.data.frequencyType!=null?response.data.frequencyType.toString():null;
                this.repeatWeekChange();
                this.repeatDate = response.data.frequencySecondType?response.data.frequencySecondType.toString():null;
                this.repeatMinute = response.data.frequencyPreciseTime;
                this.triggerLimit = response.data.attendCount==0?'1':'2';
                this.limitDay = response.data.daysCount;
                this.limitTimes = response.data.triggerCount;
                this.setContent = response.data.content?response.data.content:'';
                this.kefuValue = response.data.gzhConsultantId||'';
                                        console.log( this.kefuValue,114)

                this.formValue = response.data.gzhTemplateId||'';
                if(response.data.triggerUserVariable){
                    this.userData = true;
                    this.userValue = response.data.triggerUserVariable;
                }
                if(response.data.linkType!=null){
                    this.linkData = true;
                    this.linkType = response.data.linkType==0?'1':'2';
                    this.haveLink = response.data.linkAddress;
                    this.linkChooseValue = response.data.groupSendId;
                    this.linkText = response.data.linkName?response.data.linkName: '';
                    this.isUnifyDispense = response.data.unitedSend==0?'2':'1';
                    // this.isUnifyDispense = '1';
                }

            })
            // 修改活动
            if(!this.alter){

                this.tip = false;
            }
        }
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.cancel, false);
        }
    },
    destroyed(){ 
        window.removeEventListener('popstate', this.cancel, false);
    }
}
</script>
<style scoped>
    .bg-purple {
        background: #d3dce6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    #app-container {
        background: #f6f6f6;
        min-height: 100vh;
    }
    .head {
        height: 90px;
        background: #fff;
    }
    .activity-title {
        font-size: 22px;
    }
    .choose-group {
        height: 300px;
        background: #fff;
        width: 94%;
        margin: 20px auto 50px;
        padding: 30px 0;
    }
    .choose-tips {
        font-size: 14px;
        color: #333;
        margin-right: 20px;
    }
    .trigger-rule {
        padding: 40px 20px;
    }
    .trigger-condition {
        background: #fff;
        padding: 30px;
        border-radius: 6px;
        margin-top: 20px;
    }
    .trigger-style {
        margin-bottom: 30px;
    }
    .trigger-times-date {
        margin-bottom: 20px;
    }
    .blue {
        color: #409eff;
    }
    .textArea {
        font-size: 14px;
        color: #999;
    }
    .preview {
        border: 1px solid #ccc;
        height: 250px;
        padding: 0 200px 0 20px;
    }
    .note {
        background: #eaeaea;
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
        line-height: 22px;
        /* max-width: 350px; */
    }
    .choose-user {
        font-size: 14px;
        color: #333;
        width: 100%;
        margin-bottom: 20px;
    }
    .choose-bg {
        margin: 20px;
        background: #e8e9f5;
        padding: 20px;
        border-radius: 5px;
    }
    .filtrate {
        color: #298cf7;
        margin-left: 10px;
    }
    .reach-to {
        width: 94%;
        margin: 40px auto 0;
    }
</style>

<style>
    .trigger-times .el-radio__input {
        display: none;
    }
    .limit input{
        width: 80px;
    }
    .choose-user .el-radio{
        background: #fff;
    }
    .dialog-top .el-dialog:not(.is-fullscreen) {
        margin-top: 30vh !important;

    }
    .trigger-style .el-select {
        margin-bottom: 5px;
    }
</style>